<template>
  <el-select v-model="selectedValue" :placeholder="placeholder" :disabled="disabled" clearable @change="handleChange">
    <el-option v-for="option in props.options" :key="option.value" :label="option.label" :value="option.value" />
  </el-select>
</template>

<script setup lang="ts">

const props = defineProps({

  options: {
    type: Array<any>,
    required: true,
  },
  /**
   * 字典编码(eg: 性别-gender)
   */
  code: {
    type: String,
    required: true,
  },
  modelValue: {
    type: [String, Number],
  },
  placeholder: {
    type: String,
    default: "请选择",
    required: false,
  },
  disabled: {
    type: Boolean,
    default: false,
    required: false,
  },
})

const emits = defineEmits(["update:modelValue"])

console.log(1111111111111111, props)

//const options: Ref<OptionType[]> = ref([])

const selectedValue = ref<string | number | undefined>()

watch([props.options, () => props.modelValue], ([newOptions, newModelValue]) => {
  console.log(newOptions, newModelValue)
  if (newOptions.length === 0) {
    // 下拉数据源加载未完成不回显
    return
  }
  if (newModelValue == undefined) {
    selectedValue.value = undefined
    return
  }
  if (typeof newOptions[0].value === "number") {
    selectedValue.value = Number(newModelValue)
  } else if (typeof newOptions[0].value === "string") {
    selectedValue.value = String(newModelValue)
  } else {
    selectedValue.value = newModelValue
  }
})

function handleChange(val?: string | number | undefined) {
  emits("update:modelValue", val)
}

/* onBeforeMount(() => {
  // 根据字典编码获取字典项
  DictAPI.getOptions(props.code).then((res) => {
    if (res.status === 200) {
      options.value = res.data
    }
  })
}) */
</script>
